<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>换行的设置</title>
    <style type="text/css">
        div{
            width: 500px;
            height: 500px;
            display: flex;
            /*
            普通盒子：在父容器里面有很多的子元素（行内块），当子元素的数量太多，一行承载不了的时候，自动
            换到下一行显示，但是子元素跟子元素之间还是会有默认的间隙存在
            弹性盒子：容器里面也是有很多的项目（行内块），当项目的数量过多，设置了 flex-wrap: wrap；之后
            项目第一行如果承载不了，会自动挤到下一行，但是每一行都会被项目占满，占满之后才会自动换到下一行
            如果不设置flex-wrap的属性，那么默认显示在一行，所有的项目都会挤到同一行，宽度也会缩小，不会保持
            由开发者设置的宽度，如果一直缩小到最小的宽度还是承载不了，那么就会溢出
            */
            flex-wrap: wrap;
            /*flex-wrap: wrap-reverse;*/
            border: 1px solid   red;
        }

       span{
           display: inline-block;
           width: 73px;
           height: 100px;
           background-color: aqua;
       }



    </style>
</head>
<body>
    <div>
        <span>第一个</span>
        <span>第二个</span>
        <span>第三个</span>
        <span>第四个</span>
        <span>第五个</span>
        <span>第六个</span>
        <span>第七个</span>
        <span>第八个</span>
        <span>第九个</span>
        <span>第十个</span>
        <span>第二个</span>
        <span>第三个</span>
        <span>第一个</span>
        <span>第二个</span>
        <span>第三个</span>
        <span>第一个</span>
        <span>第二个</span>
        <span>第三个</span>
        <span>第一个</span>
        <span>第二个</span>
        <!--<span>第三个</span>-->
        <!--<span>第一个</span>-->
        <!--<span>第二个</span>-->
        <!--<span>第三个</span>-->
        <!--<span>第一个</span>-->
        <!--<span>第二个</span>-->
        <!--<span>第三个</span>-->
        <!--<span>第一个</span>-->
        <!--<span>第二个</span>-->
        <!--<span>第三个</span>-->
        <!--<span>第一个</span>-->
        <!--<span>第二个</span>-->
        <!--<span>第三个</span>-->
        <!--<span>第一个</span>-->
        <!--<span>第二个</span>-->
        <!--<span>第三个</span>-->
        <!--<span>第一个</span>-->
        <!--<span>第二个</span>-->
        <!--<span>第三个</span>-->
        <!--<span>第一个</span>-->
        <!--<span>第二个</span>-->
        <!--<span>第三个</span>-->
    </div>
</body>
</html>